import React, { Component } from "react";
import {StyleSheet, Text, TouchableWithoutFeedback, View} from "react-native";
import {Actions} from "react-native-router-flux";
import Icon from "../components/Icon";

export default class TabBarComponent extends Component{

    constructor(props) {
        super(props);

    }


    render() {
        const actoveColor =  '#EFB81B',nonActive = "#999";

        const {navigation} = this.props
        const index = navigation.state.index
        return(
            <View style={styles.container}>
                <TouchableWithoutFeedback onPress={Actions.HomePage} style={styles.navigationBar}>
                    <View style={styles.tabBarContainer}>
                        <Icon name='home' size={20} color={index === 0 ? actoveColor : nonActive}/>
                        <Text style={{color:index === 0 ? actoveColor : nonActive}}>首页</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={Actions.College} style={styles.navigationBar}>
                    <View style={styles.tabBarContainer}>
                        <Icon name='home' size={20} color={index === 1 ? actoveColor : nonActive}/>
                        <Text style={{color:index === 1 ? actoveColor : nonActive}} >商学院</Text>
                    </View>
                </TouchableWithoutFeedback >
                <TouchableWithoutFeedback onPress={Actions.Dynamic} style={styles.navigationBar}>
                    <View style={styles.tabBarContainer}>
                        <Icon name='home' size={20} color={index === 2 ? actoveColor : nonActive}/>
                        <Text style={{color:index === 2 ? actoveColor : nonActive}}>美品动态</Text>
                    </View>
                </TouchableWithoutFeedback >
                <TouchableWithoutFeedback onPress={Actions.My} style={styles.navigationBar}>
                    <View style={styles.tabBarContainer}>
                        <Icon name='home' size={20} color={index === 3 ? actoveColor : nonActive}/>
                        <Text style={{color:index === 3 ? actoveColor : nonActive}}>我的</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: "#fff",
        justifyContent: "space-between",
        alignItems: "center",
        height: 60
    },
    navigationBar: {},
    tabBarContainer: {
        width: '24%',
        justifyContent: "center",
        alignItems: "center",
    }
});

/**
 *
 * @param value
 * @returns {boolean}
 */
function date(value) {
    return true
}
